<template>
    <router-link to="/" class="indexlayout-top-message">
      <icon-svg type="message"  :style="{ fontSize: '16px' }"></icon-svg>
      <el-badge
        class="indexlayout-top-message-badge"
        :value="message"
        type="danger"
      />
    </router-link>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
import { useUserStore } from "@/store/user";
import IconSvg from "@/components/IconSvg";

interface RightTopMessageSetupData {
    message: ComputedRef<number>;
}

export default defineComponent({
    name: 'RightTopMessage',
    components: {
      IconSvg
    },
    setup(): RightTopMessageSetupData {

        const store =useUserStore();
        
        const message = computed<number>(()=> store.$state.message);


        onMounted(()=>{
            store.info();
        })


        return {
            message
        }
    }
})
</script>